import { Directive } from 'vue'
const vSizeChange: Directive = {
  mounted(el, binding) {
    const debounce = (fn: any, delay = 16) => {
      let t: NodeJS.Timeout
      return () => {
        if (t) {
          clearTimeout(t)
        }
        const context = this
        const args = arguments
        t = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }
    el._resizer = new window.ResizeObserver(debounce(binding.value, Number(binding.arg) || 16))
    el._resizer.observe(el)
  },
  unmounted(el) {
    el._resizer.disconnect()
  },
}
export default vSizeChange
